
<template>
  <div class="profile-container">
    <!-- 顶部搜索和用户区域 -->
    <div class="top-bar">
      <div class="left-aligned-header-items">
        <div class="header-logo" @click="goToMainHome">
          <img src="../assets/logo.png" alt="Logo" class="logo">
          <span class="logo-text">小白盒</span>
        </div>
        <TopBarSearch />
      </div>
      <div class="user-profile">
        <img :src="currentUser.avatar || 'https://placehold.co/30x30'" alt="用户头像" class="user-avatar" @click="toggleUserOptionsModal">
        <span class="username" @click="toggleUserOptionsModal" style="cursor: pointer;">{{ currentUser.nickname || '未登录' }}</span>
        <span class="message-icon" @click="refreshPage"></span>
      </div>
    </div>
    
    <!-- 用户选项弹窗 -->
    <div v-if="showUserOptionsModal" class="user-options-modal-overlay" @click="closeUserOptionsModal">
      <div class="user-options-modal" @click.stop>
        <div class="user-option" @click="goToPersonalHome">
          <span class="option-icon">👤</span>
          <span class="option-text">个人主页</span>
        </div>
        <div class="user-option" @click="logout">
          <span class="option-icon">🚪</span>
          <span class="option-text">退出登录</span>
        </div>
      </div>
    </div>
    
    <!-- 返回按钮 -->
    <div class="back-button">
      <button @click="goBack">← 返回</button>
    </div>
    
    <!-- 关注成功提示 -->
    <div v-if="showFollowSuccess" class="follow-success-toast">
      关注成功喵~
    </div>

    <!-- 用户信息区域 -->
    <!-- 用户信息区域 -->
    <div class="user-info">
      <img :src="user.avatar || defaultAvatar" alt="头像" class="avatar" />
      <div class="user-details">
        <h2>{{ user.nickname || user.username }}</h2>
        <p class="bio">{{ user.bio || 'TA还没有设置个性签名' }}</p>
      </div>
      <!-- 替换原有的关注按钮部分 -->
      <div v-if="currentUserId && currentUserId != userId" class="follow-section">
        <button
            @click="toggleFollow"
            :disabled="followLoading"
            :class="followButtonClass"
        >
          {{ followButtonText }}
        </button>
      </div>

      <!--      &lt;!&ndash; 添加关注/取消关注按钮 &ndash;&gt;-->
<!--      <div v-if="currentUserId && currentUserId != userId" class="follow-section">-->
<!--        &lt;!&ndash; 关注按钮 - 独立显示 &ndash;&gt;-->
<!--        <button-->
<!--            v-if="!isFollowing"-->
<!--            @click="followUser"-->
<!--            :disabled="followLoading"-->
<!--            class="follow-btn"-->
<!--        >-->
<!--          {{ followLoading ? '关注中...' : '关注' }}-->
<!--        </button>-->

<!--        <button-->
<!--            v-else-if="isFollowing && !isMutualFollow"-->
<!--            @click="unfollowUser"-->
<!--            :disabled="followLoading"-->
<!--            class="unfollow-btn"-->
<!--        >-->
<!--          {{ followLoading ? '取消中...' : '已关注' }}-->
<!--        </button>-->

<!--        &lt;!&ndash; 互相关注按钮 - 独立显示 &ndash;&gt;-->
<!--        <button-->
<!--            v-if="isMutualFollow"-->
<!--            :disabled="true"-->
<!--            class="mutual-follow-btn"-->
<!--        >-->
<!--          互相关注-->
<!--        </button>-->
<!--      </div>-->
    </div>

    <!-- 添加编辑资料按钮 -->
    <div class="edit-profile-btn" v-if="currentUserId && currentUserId == userId">
      <button @click="openEditModal" class="edit-btn">编辑资料</button>
    </div>

    <!-- 私信和互关按钮移动到个人主页下面 -->
    <div v-if="currentUserId && currentUserId != userId" class="action-buttons">
      <button @click="sendMessage" class="message-btn">私信</button>

    </div>

    <!-- 统计数据 -->
    <div class="stats-container">
      <div class="stat-item" @click="openFollowingList">
        <span class="count">{{ user.followingCount }}</span>
        <span class="label">关注</span>
      </div>
      <div class="stat-item" @click="openFollowersList">
        <span class="count">{{ user.followerCount }}</span>
        <span class="label">粉丝</span>
      </div>
    </div>

    <!-- 标签页 -->
    <div class="tabs">
      <div class="tab-item active" @click="activeTab = 'dynamics'">动态</div>
    </div>

    <!-- 内容区域 -->
    <div class="content-area">
      <div v-if="activeTab === 'dynamics'">
        <!-- 加载状态 -->
        <div v-if="loading" class="loading-state">
          <p>正在加载动态...</p>
        </div>

        <!-- 错误状态 -->
        <div v-else-if="error" class="error-state">
          <p>{{ error }}</p>
          <button @click="retryFetch">重试</button>
        </div>

        <!-- 正常显示动态 -->
        <div v-else>
          <!-- eslint-disable -->
          <activity-feed :user-id="userId" :show-nav="false" />
          <!-- eslint-enable -->
        </div>
      </div>
    </div>

    <!-- 编辑资料弹窗 -->
    <div v-if="showEditModal" class="modal-overlay" @click="closeEditModal">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h2>编辑资料</h2>
          <button class="close-btn" @click="closeEditModal">×</button>
        </div>
        <form @submit.prevent="saveProfile" class="edit-form">
          <div class="form-group">
            <label>用户名：</label>
            <input type="text" v-model="editUser.username" required />
          </div>
          <div class="form-group">
            <label>昵称：</label>
            <input type="text" v-model="editUser.nickname" />
          </div>
<!--          <div class="form-group">-->
<!--            <label>邮箱：</label>-->
<!--            <input type="email" v-model="editUser.email" />-->
<!--          </div>-->
          <div class="form-group">
            <label>性别：</label>
            <select v-model="editUser.gender">
              <option :value="null">保密</option>
              <option :value="1">男</option>
              <option :value="2">女</option>
            </select>
          </div>
<!--          <div class="form-group">-->
<!--            <label>电话：</label>-->
<!--            <input type="tel" v-model="editUser.phone" />-->
<!--          </div>-->
          <div class="form-group">
            <label>简介：</label>
            <textarea v-model="editUser.bio"></textarea>
          </div>
          <div class="form-group">
            <label>头像：</label>
            <div class="avatar-upload">
              <img :src="editUser.avatar || defaultAvatar" class="preview-avatar" />
              <div class="upload-controls">
                <input
                    type="file"
                    ref="avatarInput"
                    accept="image/*"
                    @change="handleAvatarChange"          style="display: none;"
                />
                <button type="button" @click="triggerFileSelect" class="upload-btn">
                  选择图片
                </button>
                <button
                    v-if="newAvatarFile"
                    type="button"
                    @click="uploadAvatar"
                    :disabled="uploading"
                    class="upload-btn"
                >
                  {{ uploading ? '上传中...' : '上传头像' }}
                </button>
              </div>
<!--              <input type="url" v-model="editUser.avatar" placeholder="或输入图片链接" />-->
            </div>
          </div>
          <div class="modal-actions">
            <button type="submit" :disabled="isLoading" class="save-btn">
              {{ isLoading ? '提交中...' : '保存' }}
            </button>
            <button type="button" @click="closeEditModal" :disabled="isLoading" class="cancel-btn">
              取消
            </button>
          </div>
          <p v-if="editMsg" :class="{ success: editSuccess, error: !editSuccess }" class="message">
            {{ editMsg }}
          </p>
        </form>
      </div>
    </div>

    <!-- 用户列表模态框 -->
    <div v-if="showUserListModal" class="modal-overlay" @click="closeUserListModal">
      <div class="modal-content" @click.stop style="max-height: 500px;">
        <div class="modal-header">
          <h2>{{ userListType === 'following' ? '关注列表' : '粉丝列表' }}</h2>
          <button class="close-btn" @click="closeUserListModal">×</button>
        </div>
        <div class="user-list">
          <div v-if="userListLoading" class="loading">加载中...</div>
          <div v-else-if="userList.length === 0" class="empty">暂无数据</div>
          <div v-else>
            <!-- 将用户列表项修改为可点击 -->
            <div v-for="u in userList" :key="u.id" class="user-list-item" @click="goToUserPage(u.id)">
              <img :src="u.avatar || defaultAvatar" class="user-list-avatar" />
              <span class="user-list-name">{{ u.nickname || u.username }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// -------------------- 依赖与变量 --------------------
import { ref, onMounted, watch, computed } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios'
import { useRouter } from 'vue-router'
import { nextTick } from 'vue'
import { onBeforeRouteUpdate } from 'vue-router'
// 导入 ActivityFeed 组件
import ActivityFeed from "@/activity/ActivityFeed.vue";
// 导入顶部搜索组件
import TopBarSearch from '../components/TopBarSearch.vue';
import { currentUser } from '../user.js';

// 顶部栏相关变量
const showUserOptionsModal = ref(false);



const isFollowing = ref(false) // 当前用户是否关注了目标用户
const followLoading = ref(false) // 关注操作加载状态
// 添加互关状态变量
const isMutualFollow = ref(false) // 是否互相关注

const router = useRouter()
const route = useRoute()
const userId = computed(() => route.params.id || '1')
const defaultAvatar = 'https://placehold.co/100x100'
const showEditModal = ref(false)
const isLoading = ref(false)
const editMsg = ref('')
const editSuccess = ref(false)
const editUser = ref({
  id: '', username: '', nickname: '', email: '', gender: null,
  phone: '', bio: '', avatar: '', version: 0 // 删除 posts 相关字段
})

const user = ref({
  id: '', username: '', nickname: '', phone: '', email: '', bio: '', avatar: '', gender: null,
  followerCount: 0, followingCount: 0, dynamics: []
})

const activeTab = ref('dynamics')

// 关注成功提示相关
const showFollowSuccess = ref(false)
const followSuccessTimer = ref(null)

// 添加以下响应式变量
const showUserListModal = ref(false)
const userListType = ref('following')
const userList = ref([])
const userListLoading = ref(false)

// 从 localStorage 获取用户信息
const currentUserId = ref(null)
const avatarInput = ref(null);
const newAvatarFile = ref(null);
const uploading = ref(false);

const loading = ref(true);
const error = ref(null);

// // 添加防抖处理
// const debounceToggleFollow = useDebounce(toggleFollow, 300);

// 计算属性：确定按钮显示文本
const followButtonText = computed(() => {
  if (followLoading.value) {
    return '处理中...';
  }
  if (isMutualFollow.value) {
    return '互相关注';
  }
  if (isFollowing.value) {
    return '已关注';
  }
  return '关注';
});

// 计算属性：确定按钮样式类
const followButtonClass = computed(() => {
  if (isMutualFollow.value) {
    return 'mutual-follow-btn';
  }
  if (isFollowing.value) {
    return 'unfollow-btn';
  }
  return 'follow-btn';
});

function goBack() {
  router.back();
}

// 顶部栏相关函数
function goToMainHome() {
  router.push('/mainpage').then(() => {
    // 页面跳转后刷新页面
    window.location.reload();
  });
}

// 实现私信功能，跳转到私聊界面
function sendMessage() {
  // 跳转到 MessageHome 的 PrivateChat 界面，并传递当前查看的用户ID
  const targetId = userId.value;
  const targetName = user.value.nickname || user.value.username;
  
  // 直接使用完整路径进行跳转到 messagehome
  window.location.href = `http://localhost:8080/#/messagehome?targetUserId=${targetId}&targetUserName=${encodeURIComponent(targetName)}&view=privatechat`;
}

function goToPersonalHome() {
  router.push(`/user/${currentUser.id}`);
}

// 切换用户选项弹窗
function toggleUserOptionsModal() {
  showUserOptionsModal.value = !showUserOptionsModal.value;
}

// 关闭用户选项弹窗
function closeUserOptionsModal() {
  showUserOptionsModal.value = false;
}

// 刷新页面
function refreshPage() {
  window.location.reload();
}

// 退出登录
function logout() {
  localStorage.removeItem('user');
  localStorage.removeItem('token');
  router.push('/login');
}

// 添加重试方法
async function retryFetch() {
  loading.value = true;
  error.value = null;

  try {
    await fetchUserProfile();
    await checkFollowStatus();
    await fetchUserDynamics();
  } catch (e) {
    error.value = '加载失败，请重试';
  } finally {
    loading.value = false;
  }
}

// 显示关注成功提示
function showFollowSuccessToast() {
  showFollowSuccess.value = true;
  
  // 清除之前的定时器
  if (followSuccessTimer.value) {
    clearTimeout(followSuccessTimer.value);
  }
  
  // 1.5秒后自动关闭
  followSuccessTimer.value = setTimeout(() => {
    showFollowSuccess.value = false;
    followSuccessTimer.value = null;
  }, 1500);
}

// 新增方法：切换关注状态
async function toggleFollow() {
  if (followLoading.value || !currentUserId.value) return;

  followLoading.value = true;
  try {
    // 如果是互相关注状态，点击后应取消关注
    if (isMutualFollow.value) {
      await axios.post(`http://localhost:8084/api/user/unfollow`, null, {
        params: {
          followerId: currentUserId.value,
          followingId: userId.value
        }
      });
      isFollowing.value = false;
      isMutualFollow.value = false;
    } 
    // 如果只是单方面关注，点击后应取消关注
    else if (isFollowing.value) {
      await axios.post(`http://localhost:8084/api/user/unfollow`, null, {
        params: {
          followerId: currentUserId.value,
          followingId: userId.value
        }
      });
      isFollowing.value = false;
      isMutualFollow.value = false;
    } 
    // 如果未关注，点击后应关注
    else {
      const response = await axios.post(`http://localhost:8084/api/user/follow`, null, {
        params: {
          followerId: currentUserId.value,
          followingId: userId.value
        }
      });

      if (response.status === 200 || response.status === 409) {
        isFollowing.value = true;
        // 显示关注成功提示
        showFollowSuccessToast();
        // 检查是否互相关注
        await checkMutualFollowStatus();
      }
    }

    // 更新用户信息以刷新关注数
    await fetchUserProfile();
  } catch (error) {
    console.error('关注操作失败:', error);
    // 操作失败后重新检查状态
    await checkFollowStatus();
  } finally {
    followLoading.value = false;
  }
}


// 触发文件选择
function triggerFileSelect() {
  avatarInput.value.click();
}

// 处理头像文件变更
function handleAvatarChange(event) {
  const file = event.target.files[0];
  if (file) {
    // 验证文件类型
    if (!file.type.startsWith('image/')) {
      alert('请选择图片文件');
      return;
    }

    // 验证文件大小 (5MB)
    if (file.size > 5 * 1024 * 1024) {
      alert('文件大小不能超过5MB');
      return;
    }

    newAvatarFile.value = file;

    // 显示预览
    const reader = new FileReader();
    reader.onload = (e) => {
      editUser.value.avatar = e.target.result;
    };
    reader.readAsDataURL(file);
  }
}

// 上传头像
async function uploadAvatar() {
  if (!newAvatarFile.value) return;

  uploading.value = true;

  try {
    const formData = new FormData();
    formData.append('file', newAvatarFile.value);

    const response = await axios.post(
        `http://localhost:8084/api/user/${userId.value}/avatar`,
        formData,
        {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
    );

    if (response.data) {
      editUser.value.avatar = response.data;
      newAvatarFile.value = null;
      alert('头像上传成功');
    }
  } catch (error) {
    console.error('头像上传失败:', error);
    alert('头像上传失败: ' + (error.response?.data || error.message));
  } finally {
    uploading.value = false;
  }
}

// 修改保存资料函数，在保存前先上传头像
async function saveProfile() {
  if (!editUser.value.username.trim()) {
    editMsg.value = '用户名不能为空';
    editSuccess.value = false;
    return;
  }

  // 如果有新头像文件，先上传
  if (newAvatarFile.value) {
    await uploadAvatar();
  }

  isLoading.value = true;
  editMsg.value = '';

  try {
    const res = await axios.put(`http://localhost:8084/api/user/${userId.value}/profile`, {
      ...editUser.value,
      id: user.value.id,
      version: user.value.version
    });

    console.log('API响应:', res.data);

    if (res.data) {
      await fetchUserProfile();
      editMsg.value = '保存成功！';
      editSuccess.value = true;
      newAvatarFile.value = null; // 清除已上传的文件
      setTimeout(() => closeEditModal(), 800);
    }
  } catch (error) {
    console.error('保存失败:', error);
    editMsg.value = '保存失败，请重试';
    editSuccess.value = false;
  } finally {
    isLoading.value = false;
  }
}

// 在关闭模态框时清除文件选择
function closeEditModal() {
  showEditModal.value = false;
  editMsg.value = '';
  editSuccess.value = false;
  newAvatarFile.value = null;
  if (avatarInput.value) {
    avatarInput.value.value = '';
  }
}

onMounted(() => {
  const userStr = localStorage.getItem('user')
  if (userStr) {
    try {
      const user = JSON.parse(userStr)
      currentUserId.value = user.id
    } catch (e) {
      console.error('解析用户信息失败', e)
    }
  }
})

// 添加检查关注状态的方法
async function checkFollowStatus() {
  if (!currentUserId.value || currentUserId.value == userId.value) {
    isFollowing.value = false;
    isMutualFollow.value = false;
    return;
  }

  try {
    const res = await axios.get(`http://localhost:8084/api/user/check`, {
      params: {
        followerId: currentUserId.value,
        followingId: userId.value
      }
    });
    
    // 正确判断是否已关注
    isFollowing.value = res.data > 0;
    
    const mutualRes = await axios.get(`http://localhost:8084/api/user/isFriend`, {
      params: {
        userId: currentUserId.value,
        otherId: userId.value
      }
    });
    
    // 正确判断是否互相关注
    isMutualFollow.value = mutualRes.data > 0;
  } catch (error) {
    console.error('检查关注状态失败:', error);
    isFollowing.value = false;
    isMutualFollow.value = false;
  }
}

// 同样修改关注和取消关注方法中的用户ID引用
// async function followUser() {
//   if (followLoading.value || !currentUserId.value) return;
//
//   followLoading.value = true;
//   try {
//     const response = await axios.post(`http://localhost:8084/api/user/follow`, null, {
//       params: {
//         followerId: currentUserId.value,
//         followingId: userId.value
//       }
//     });
//
//     if (response.status === 200 || response.status === 409) {
//       isFollowing.value = true;
//       // 更新互关状态
//       await checkMutualFollowStatus();
//       await fetchUserProfile();
//     }
//   } catch (error) {
//     if (error.response && error.response.status === 409) {
//       isFollowing.value = true;
//       console.log('已关注该用户');
//     } else {
//       console.error('关注失败:', error);
//     }
//   } finally {
//     followLoading.value = false;
//   }
// }

// 提取互关状态检查为独立方法
async function checkMutualFollowStatus() {
  try {
    const mutualRes = await axios.get(`http://localhost:8084/api/user/isFriend`, {
      params: {
        userId: currentUserId.value,
        otherId: userId.value
      }
    });
    isMutualFollow.value = mutualRes.data;
  } catch (error) {
    console.error('检查互关状态失败:', error);
  }
}
//
// async function unfollowUser() {
//   if (followLoading.value || !currentUserId.value) return;
//
//   followLoading.value = true;
//   try {
//     await axios.post(`http://localhost:8084/api/user/unfollow`, null, {
//       params: {
//         followerId: currentUserId.value,
//         followingId: userId.value
//       }
//     });
//     isFollowing.value = false;
//     // 重新获取用户信息以更新粉丝数
//     await fetchUserProfile();
//   } catch (error) {
//     console.error('取消关注失败:', error);
//     await checkFollowStatus();
//   } finally {
//     followLoading.value = false;
//   }
// }

// 添加打开关注列表的方法
async function openFollowingList() {
  userListType.value = 'following'
  await fetchUserList()
  showUserListModal.value = true
}

// 添加打开粉丝列表的方法
async function openFollowersList() {
  userListType.value = 'followers'
  await fetchUserList()
  showUserListModal.value = true
}

// 获取用户列表的通用方法
async function fetchUserList() {
  userListLoading.value = true
  try {
    let url = userListType.value === 'following'
        ? `http://localhost:8084/api/user/${userId.value}/following`
        : `http://localhost:8084/api/user/${userId.value}/followers`

    const res = await axios.get(url)
    userList.value = Array.isArray(res.data) ? res.data : []
  } catch (error) {
    console.error('获取用户列表失败:', error)
    userList.value = []
  } finally {
    userListLoading.value = false
  }
}

// 添加跳转到用户页面的方法
function goToUserPage(userId) {
  closeUserListModal()
  router.push(`/user/${userId}`).then(() => {
    // 页面跳转后重新检查关注状态
    nextTick(() => {
      checkFollowStatus()
    })
  })
}

// 关闭用户列表模态框
function closeUserListModal() {
  showUserListModal.value = false
}

// 添加路由更新钩子，在路由参数变化时重新初始化数据
onBeforeRouteUpdate(async (to, from) => {
  if (to.params.id !== from.params.id) {
    await initUserData()
    // 确保在路由更新后再次检查关注状态
    await nextTick(() => {
      checkFollowStatus()
    })
  }
})

// 添加 watch 监听 userId 变化
watch(userId, async (newUserId, oldUserId) => {
  if (newUserId !== oldUserId) {
    await initUserData()
  }
})

// -------------------- 页面初始化 --------------------
onMounted(initUserData)
watch(() => route.params.id, initUserData)
async function initUserData() {
  try {
    await fetchUserProfile();
    await checkFollowStatus();
    await fetchUserDynamics();
  } catch (e) {
    error.value = '初始化数据失败';
  } finally {
    loading.value = false;
  }
}

// 在 mounted 钩子后添加一个 nextTick 确保 DOM 更新后再检查一次关注状态
onMounted(() => {
  initUserData().then(() => {
    nextTick(() => {
      checkFollowStatus()
    })
  })
})

// -------------------- 数据获取函数 --------------------
async function fetchUserProfile() {
  try {
    const [userRes, followersRes, followingRes] = await Promise.all([
      axios.get(`http://localhost:8084/api/user/${userId.value}`),
      axios.get(`http://localhost:8084/api/user/${userId.value}/followers/count`),
      axios.get(`http://localhost:8084/api/user/${userId.value}/following/count`)
    ]);

    Object.assign(user.value, userRes.data, {
      followerCount: followersRes.data,
      followingCount: followingRes.data,
      nickname: userRes.data.nickname ?? '',
      bio: userRes.data.bio ?? '',
      avatar: userRes.data.avatar ?? '',
      gender: userRes.data.gender ?? null,
      version: userRes.data.version ?? 0,
      dynamics: Array.isArray(userRes.data.dynamics) ? userRes.data.dynamics : []
    });

    // 打印用户基本信息
    console.log('用户基本信息:', {
      id: user.value.id,
      username: user.value.username,
      nickname: user.value.nickname,
      followerCount: user.value.followerCount,
      followingCount: user.value.followingCount
    });
  } catch (error) {
    console.error('获取用户信息失败:', error);
    if (error.response?.status === 403) {
      console.log('权限不足，无法访问用户信息');
    } else if (error.response?.status === 404) {
      console.log('用户不存在');
    }
  }
}
// 添加获取用户动态的方法
async function fetchUserDynamics() {
  console.log('开始获取用户动态，用户ID:', userId.value);
  try {
    const res = await axios.get(`http://localhost:8085/activity/user/${userId.value}`);
    user.value.dynamics = res.data || [];
  } catch (e) {
    user.value.dynamics = [];
  }
}
//
// async function fetchUserDynamics() {
//   try {
//     const res = await axios.get(`http://localhost:8085/activity/user/${userId.value}/dynamics`)
//     user.value.dynamics = res.data || []
//   } catch (e) {
//     user.value.dynamics = []
//   }
// }

// -------------------- 编辑资料相关 --------------------
function openEditModal() {
  // 初始化编辑用户数据
  editUser.value = { ...user.value }
  editMsg.value = ''
  editSuccess.value = false
  showEditModal.value = true
}

// -------------------- 工具函数 --------------------
// function formatDate(dateStr) {
//   if (!dateStr) return ''
//   const date = new Date(dateStr)
//   return date.toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
// }
</script>

<style scoped>
.profile-container {
  width: 900px;
  margin: 20px auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 24px;
  padding-top: 70px; /* 为顶部栏留出空间 */
}

/* 顶部栏样式 */
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  height: 50px;
}

.left-aligned-header-items {
  display: flex;
  align-items: center;
  flex-grow: 1;
  width: 100%;
}

.header-logo {
  display: flex;
  align-items: center;
  height: 100%;
  margin-left: 24px;
  cursor: pointer;
}

.logo {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.logo-text {
  font-size: 20px;
  font-weight: bold;
  margin-right: 60px;
  width: 100px;
  color: #333;
}

.user-profile {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 100px;
}

.user-avatar {
  border-radius: 50%;
  margin-right: 10px;
  width: 30px;
  height: 30px;
}

.username {
  font-weight: bold;
  margin-right: 20px;
  font-size: 15px;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.message-icon {
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: inline-block;
  background-image: url('https://img.icons8.com/sf-regular/48/messaging-.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  text-indent: -9999px; /* 隐藏文字 */
}

/* 用户选项弹窗样式 */
.user-options-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  z-index: 1000;
}

.user-options-modal {
  position: absolute;
  top: 50px;
  right: 100px;
  width: 150px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}

.user-option {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s;
}

.user-option:hover {
  background-color: #f5f5f5;
}

.option-icon {
  margin-right: 10px;
  font-size: 18px;
}

.option-text {
  font-size: 14px;
  color: #000000;
}

.back-button {
  margin-bottom: 24px;
}

.back-button a {
  color: #666;
  text-decoration: none;
  font-size: 14px;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 16px;
}

.user-details h2 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.bio {
  color: #999;
  font-size: 14px;
  margin: 4px 0;
}

.stats-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.stat-item {
  text-align: center;
}

.count {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.label {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
  display: block;
}

.tabs {
  display: flex;
  border-bottom: 1px solid #eee;
  margin-bottom: 24px;
}

.tab-item {
  padding: 12px 24px;
  cursor: pointer;
  font-size: 14px;
  color: #666;
  transition: all 0.2s;
}

.tab-item.active {
  color: #333;
  background-color: #f5f5f5;
  border-bottom: 2px solid #333;
}

.content-area {
  min-height: 300px;
}



/* 修改资料样式 */
.edit-profile-btn {
  text-align: right;
  margin-bottom: 20px;
}

.edit-btn {
  background: rgba(255, 255, 255, 0.8); /* 白色透明背景 */
  color: #333; /* 深色文字以确保可读性 */
  border: 1px solid #ddd; /* 添加边框以增强可见性 */
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  backdrop-filter: blur(10px); /* 可选：添加模糊效果 */
}

.edit-btn:hover {
  background: rgba(255, 255, 255, 1); /* 悬停时稍微增加不透明度 */
  border-color: #bbb;
}

/* 添加模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 8px;
  padding: 20px;
  min-width: 400px;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
}

.close-btn:hover {
  color: #333;
}

.edit-form .form-group {
  margin-bottom: 15px;
}

.edit-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.edit-form input,
.edit-form textarea,
.edit-form select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

.edit-form textarea {
  min-height: 80px;
  resize: vertical;
}

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}

.save-btn {
  background: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  cursor: pointer;
}

.save-btn:hover {
  background: #218838;
}

.save-btn:disabled {
  background: #6c757d;
  cursor: not-allowed;
}

.cancel-btn {
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  cursor: pointer;
}

.cancel-btn:hover {
  background: #5a6268;
}

.message {
  margin-top: 15px;
  text-align: center;
}

.message.success {
  color: #28a745;
}

.message.error {
  color: #dc3545;
}

/* 关注或粉丝用户列表样式 */
.user-list {
  max-height: 350px;
  overflow-y: auto;
}

.user-list-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.user-list-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
}

.user-list-name {
  font-size: 16px;
  color: #333;
}

.loading, .empty {
  text-align: center;
  color: #aaa;
  padding: 30px 0;
}

.stat-item {
  cursor: pointer; /* 添加指针样式表明可点击 */
}

.stat-item:hover {
  opacity: 0.8; /* 添加悬停效果 */
}

/* 添加关注或取消关注按钮样式 */
.follow-section {
  margin-left: auto;
}

.follow-btn {
  background: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
}

.follow-btn:hover:not(:disabled) {
  background: #2980b9;
}

.follow-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.unfollow-btn {
  background: #ecf0f1;
  color: #7f8c8d;
  border: 1px solid #bdc3c7;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
}

.unfollow-btn:hover:not(:disabled) {
  background: #d5dbdb;
  color: #34495e;
}

.unfollow-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 上传头像样式 */

.avatar-upload {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.preview-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.upload-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.upload-btn {
  background: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
}

.upload-btn:hover:not(:disabled) {
  background: #2980b9;
}

.upload-btn:disabled {
  background: #bdc3c7;
  cursor: not-allowed;
}

.activity-card {
  margin-bottom: 24px;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(44,62,80,0.08);
  background: #fff;
  padding: 0 0 8px 0;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.floating-post-btn {
  position: fixed;
  bottom: 36px;
  right: 60px;
  z-index: 100;
  background: linear-gradient(90deg, #43484e 0%, #23272b 100%);
  color: #fff;
  border: none;
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(52,152,219,0.10);
  font-size: 20px;
  font-weight: 500;
  padding: 16px 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}


.follow-section {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}

.mutual-follow-btn {
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: not-allowed;
  font-size: 14px;
  margin-right: 8px; /* 添加间距 */
}


.follow-btn {
  background: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
}

.follow-btn:hover:not(:disabled) {
  background: #2980b9;
}

.follow-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.unfollow-btn {
  background: #ecf0f1;
  color: #7f8c8d;
  border: 1px solid #bdc3c7;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
}

.unfollow-btn:hover:not(:disabled) {
  background: #d5dbdb;
  color: #34495e;
}

.unfollow-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.mutual-follow-btn {
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
}

.mutual-follow-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 关注成功提示样式 */
.follow-success-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 16px;
  z-index: 9999;
  animation: fadeInOut 1.5s ease-in-out forwards;
}

@keyframes fadeInOut {
  0% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}
</style>
